<template>
  <div class="wrapper">
    <div class="popup">
      <div class="head">
        <span class="title">用户信息</span>
        <span class="close" @click="manageUser">x</span>
      </div>
      <hr />
      <div class="add-search">
        <el-button type="primary" size="small" @click="showAddUser"
          >新增</el-button
        >
        <el-input v-model.trim="searchUser" placeholder="搜索用户名"></el-input>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="type" label="用户类型" align="center" />
        <el-table-column prop="isOnline" label="登录状态" align="center" />
        <el-table-column label="Operations" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="
                showChangeUser({
                  username: scope.row.username
                })
              ">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="
                deleteTheUser({
                  username: scope.row.username,
                  type: scope.row.type,
                })
              ">
              删除
            </el-button>
            <el-button size="small" type="primary" v-show="scope.row.isOnline" @click="offlineTheUser(
              {
                username: scope.row.username,
                type: scope.row.type,
              }
            )">
              下线
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="page"
        :total="totalData.length"
        :page-size="5"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
//   import { ElTable, ElTableColumn, ElButton } from 'element-plus'
// import { Overlay } from 'vant'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMapgisStore_zxh } from '@/stores/mapgis-zxh.js'
const {
  manageUser,
  handleCurrentChange,
  deleteTheUser,
  showAddUser,
  showChangeUser,
  offlineTheUser,
} = useMapgisStore_zxh()
const { searchUser, tableData, totalData,page } = storeToRefs(
  useMapgisStore_zxh()
)

</script>

<style scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  width: 60vw;
  height: 40vh;
  background-color: skyblue;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.head {
  display: flex;
  justify-content: space-between;
  margin: 5px 20px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
}
.close {
  cursor: pointer;
}
.add-search {
  display: flex;
  justify-content: space-between;
  margin: 5px 20px;
}
.el-input {
  width: 200px;
}
</style>
